import React, { Component } from "react";
import { Form, Input, Tree } from "antd";
import PropTypes from "prop-types";
import menulist from "../../config/menuConfig"
const { TreeNode } = Tree;
class Authform extends Component {
  constructor(props) {
    super(props);
    const { menus } = this.props.role;
    console.log(1111, menus);
    this.state = {
      checkedKeys: menus,
    };
  }
  getTreeNodes=(menulist)=>{
      return menulist.reduce((pre,item)=>{
          pre.push(<TreeNode title={item.title} key={item.key}>
              {item.children?this.getTreeNodes(item.children):null}
          </TreeNode>
          )
          return pre
        
      },[])
  }
  //选择某个的回调
  onCheck=(checkedKeys)=>{
      this.setState({checkedKeys:checkedKeys})
  }
  componentWillMount(){
   this.treeNodes= this.getTreeNodes(menulist)
  }
  componentWillReceiveProps(nextProps){
      const menus=nextProps.role.menus;
      this.setState({
          checkedKeys:menus
      })
  }
  getMenus=()=>this.state.checkedKeys
  render() {
    const { role,  } = this.props;
    const {checkedKeys}=this.state
    const formItemLayout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 16,
      },
    };
    return (
      <div>
        <Form.Item label="角色名称" {...formItemLayout}>
          <input value={role.name} disabled />
        </Form.Item>
        <Tree 
        onCheck={this.onCheck}
        checkable defaultExpandAll={true} checkedKeys={checkedKeys}>
         <TreeNode title="平台权限" key="all">
             {this.treeNodes}
         </TreeNode>
        </Tree>
      </div>
    );
  }
}

export default Authform;
